<template>
  <el-row :gutter="20">
      <el-table ref="table" :data="tableData" v-loading="tableLoading" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="goods.picture" label="计算机图片" width="100">
          <template #default="scope">
            <el-image :src="scope.row.goods.picture" width="80" />
          </template>
        </el-table-column>
        <el-table-column prop="goods.name" label="计算机名称" width="100" />
        <el-table-column prop="goods.assort" label="分类" />
        <el-table-column label="数量" width="200">
          <template #default="scope">
            <el-input-number size="small" @change="updateGoodsSum(scope.row)" v-model="scope.row.goodsSum" :step="1" :min="1" />
          </template>
        </el-table-column>
        <el-table-column label="地址" width="200" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.address.province }}{{ scope.row.address.city }}{{ scope.row.address.area }}{{
              scope.row.address.specific }}
          </template>
        </el-table-column>
        <el-table-column label="收货人" prop="address.name" />
        <el-table-column label="金额" width="140">
          <template #default="scope">
            {{ scope.row.goods.price * scope.row.goodsSum }} 元
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button link type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination 
        v-model:current-page="pageInfo.pageNum" 
        :page-size="pageInfo.pageSize"
        small="small" 
        background
        layout="total, prev, pager, next" 
        :total="pageInfo.total" 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
        <div style="margin-left:600px;">
          总计:{{ total }}元
          <el-button type="danger" round @click="downIndent">选中下单</el-button>
        </div>
        
  </el-row>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { pageList, deleteById , getTotalMoney, updateGoodsSum as update} from '@/api/cart.js';
import {addIndent} from '@/api/indent.js';
import { ElMessageBox, ElLoading,ElNotification, ElMessage  } from "element-plus";
import {useStore} from 'vuex';
// 表格数据
const tableData = ref([]);
const table = ref();
// 分页数据
const pageInfo = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 8,
});
const store = useStore()
// 表格加载
const tableLoading = ref(false);

const total = ref(0);

onMounted(async () => {
  if(!store.state.user){
    ElMessage({
      type: "warning",
      message: "请先登录!"
    });
    window.location.href = "/"
  }else{
    await list();
  }
})

// 选中下单
const downIndent = async()=>{
  const selectAll = table.value.getSelectionRows();
  console.log(selectAll);
  // 开启加载
  const loading = ElLoading.service({ fullscreen: true });
  // 遍历添加订单
  for(let i = 0; i<selectAll.length; i++){
    const select = selectAll[i];
    const indentData = {};
    indentData.addressId = select.addressId;
    indentData.goodsId = select.goodsId;
    indentData.num = select.goodsSum;
    await addIndent(indentData)
    // 删除购物车
    await deleteById(select.id);
  }
  loading.close();
  ElNotification({
      title: "下单成功!",
      message: "订单新增成功，请去我的订单支付",
      type: 'success',
    })
  // 重新加载表格
  await list();
}

// 修改商品数量
const updateGoodsSum = async (car)=>{
  await update(car.id, car.goodsSum)
  const moneyResponse = await getTotalMoney()
  total.value = moneyResponse.data.data;
}

// 查询购物车信息
const list = async () => {
  tableLoading.value = true;
  const response = await pageList(pageInfo)
  tableData.value = response.data.data.list;
  pageInfo.total = response.data.data.total;
  tableLoading.value = false;
  const moneyResponse = await getTotalMoney()
  total.value = moneyResponse.data.data;
}

// 删除购物车
const deleteData = async (id) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除购物车吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    await deleteById(id);
    // 删除后，重新刷新列表
    await list();
  } catch (e) {
  }
}

// 处理页数发生改变的方法
const handleSizeChange = async (pageSize) => {
  pageInfo.pageSize = pageSize;
  await list();
}

// 页码大小发生改变
const handleCurrentChange = async (pageNum) => {
  pageInfo.pageNum = pageNum;
  await list();
}
</script>

<style scoped></style>